<template>
    <div class="flex_col_start m5 p10 card">
        <label class="flex_center_self">创建项目</label>
        <div class="flex_row_center mt5">
            <label>名称:</label>
            <el-input v-model="ctx.name" clearable class="ml5" style="width: 400px;" />
        </div>
        <div class="flex_row_center mt5">
            <label>版本:</label>
            <el-input clearable v-model="ctx.version" class="ml5" style="width: 200px;" />
        </div>
        <div class="flex_row_center mt5">
            <label>描述:</label>
            <el-input v-model="ctx.description" class="ml5" type="textarea" style="width: 400px;" />
        </div>
        <div class="flex_row_center flex_center_self mt5">
            <el-button @click="onClickCreate" type="primary">创建</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { createProj } from '@/service/proj';
import { runAction } from '@/utils/ui';
import { parseNumber } from '@/utils/utils';
import { reactive } from 'vue';


interface Ctx {
    name: string,
    version: string,
    description: string,
}

const ctx = reactive<Ctx>({
    name: '',
    version: '1',
    description: '',
});

const emit = defineEmits<{
    created: []
}>();

async function onClickCreate() {
    let flag = false;
    await runAction('创建', '创建项目', async () => {
        const version = parseNumber(ctx.version);
        if (ctx.name.length == 0) {
            throw '请输入名称';
        }
        await createProj({
            name: ctx.name,
            description: ctx.description,
            version,
        });
        flag = true;
    });
    if (!flag) {
        return;
    }
    emit('created');
}


</script>
